<template>
    <div id="login">

        <!--页面右边的整个输入区-->
      <div id="login_frame">

        <!--用户名-->
        <div class="flexbox">
          <div class="input_line">
            <i class="Hui-iconfont" style="color: snow">&#xe60d;</i>
            <input placeholder="用户名" type="text" class="input_text" v-model="username">
          </div>
        </div>

        <!--密码-->
        <div class="flexbox">
          <div class="input_line">
            <i class="Hui-iconfont" style="color: snow">&#xe60e;</i>
            <input :type="pswType"  placeholder="密码" class="input_text" v-model="password">
            <!--cursor:pointer;设置鼠标停留变成手型-->
            <i class="Hui-iconfont" style="color: snow; cursor:pointer;" @click="showPwd" v-if="pswType=='password'">&#xe725;</i>
            <i class="Hui-iconfont" style="color: snow; cursor:pointer;" @click="showPwd" v-else>&#xe624;</i>
          </div>
        </div>

        <!--验证码-->
        <div class="flexbox">
          <div class="input_line1">
            <i class="Hui-iconfont" style="color: snow">&#xe60c;</i>
            <input placeholder="验证码" type="text" class="input_text" v-model="verifyCode">
          </div>
          <img :src="vrcUrl" id="verifyCode" @click="updateVerifyCode">
        </div>

        <!--登录按钮-->
        <div class="flexbox">
          <el-button type="primary" class="login_button" @click="login">登录</el-button>
        </div>

        <!--忘记密码-->
        <div class="flexbox">
          <a href="#" id="forget_pwd">忘记密码？</a>
        </div>

        <!--注册-->
        <div id="register">
          <div class="register_line"></div> <!--通过div设置中间分割线-->
          <p class="register_p">没有账号？请<a href="#" class="register_a">注册</a></p>
          <div class="register_line"></div>
        </div>

      </div>

      <!--页面左边的大标语-->
      <div id="title">
        <div class="title_content">
          <p style="font-size: 50px;" class="title_word">博 客 管 理 系 统 平 台</p>
          <p style="font-size: 25px;padding-left:80px" class="title_word"> ———————— 年轻人的互动平台</p>
        </div>
      </div>

    </div>
</template>

<script>
    import 'url-search-params-polyfill';

    export default {
        name: "Login",

      data(){
          return{
            pswType:"password", //密码框类型
            username:'',
            password:'',
            verifyCode:'',
            vrcUrl:'http://localhost:8081/verifyCode?time='+new Date(),//验证码获取地址,添加一个时间，触发事件时系统就发现变量改变，从而更换地址
          };
      },

      methods: {
        showPwd() {//改变密码框类型
          this.pswType = this.pswType === 'password' ? 'text' : 'password';
        },

        updateVerifyCode(){
          this.vrcUrl='http://localhost:8081/verifyCode?time='+new Date();
        },

        login() {
          const _this = this
          // var params = new URLSearchParams();
          // params.append('account',_this.account)
          // params.append('password',_this.password)
          this.axios.defaults.withCredentials=true  //开启发送cookie
          this.axios({
            method:'post',
            url:"http://localhost:8081/verifyManager",
            params:{'verifyCode': _this.verifyCode,'username': _this.username,'password':_this.password}
          }).then(function (resp) {
            if(resp.data.status==400){
              alert(resp.data.info)
              _this.vrcUrl='http://localhost:8081/verifyCode?time='+new Date();
            }else{
              if(resp.data.status==200){
                _this.$store.commit('login',resp.data)
                _this.$router.replace('/home')
              }else{
                alert(resp.data.info)
                _this.vrcUrl='http://localhost:8081/verifyCode?time='+new Date();
              }
            }
          })
        },
      },

    }
</script>

<style scoped>
  @import "../../static/Hui-iconfont/1.0.8/iconfont.css";

  #login{
    min-width: 1500px;
    min-height: 700px;
    background-image: url("../assets/登录界面背景图4.jpg");
    /*设置该模块的宽高*/
    width: 100%;
    height: 100%;
    position: absolute;
    /*设置背景图占该模块里的宽高*/
    background-size: cover;
    /*设置图片不重复，默认在水平和垂直重复。*/
    background-repeat: no-repeat;
  }

  #login_frame{
    width: 400px;
    height: 450px;
    background-color: rgba(240,240,255,0.5);
    position: absolute;
    left: 950px;
    top:15%;
    border-radius: 10px;/*设置边角为圆*/
    padding-top: 30px;
  }

  .flexbox{
    display: flex;
    width: 80%;
    margin: 30px auto;
    font-size: 30px;
  }

  .input_text{
    font-family: 宋体;
    width: 300px;
    height: 30px;
    border-radius: 5px;
    border:0;
    background-color: transparent;
    color:snow;
    font-size: 18px;
    margin-left: 5px;
    outline: none;
  }

  .input_line{
    border-bottom: snow solid;
    border-bottom-width: 1px;
    display: flex;
    width: 100%;
  }

  .input_line1{
    border-bottom: snow solid;
    border-bottom-width: 1px;
    display: flex;
    width: 60%;
  }

  #verifyCode{
    width: 30%;
    margin-left: 10%;
    cursor:pointer;
  }

  .login_button{
    font-family: 宋体;
    font-size: 18px;
    width: 100%;
  }

  #forget_pwd{
    text-decoration: none;
    font-family: 宋体;
    font-size: 14px;
    color: snow;
    position: absolute;
    right: 10%;
  }

  #forget_pwd:hover{
    color: #40D9FF;
  }

  #register{
    display: flex;
    width: 80%;
    margin: 25% 10% auto;
    color: snow;
    font-family: 宋体;
    font-size: 16px;
  }

  .register_line{
    border-bottom: snow solid;
    border-bottom-width: 1px;
    width: 25%;
    margin-bottom: 8px;/*设置为#register里font-size的一半*/
  }

  .register_p{
    width: 50%;
    text-align: center;
    margin: 0px;
  }

  .register_a{
    text-decoration: none;
    color:#40D9FF;
  }

  #title{
    width: 600px;
    height: 150px;
    position: absolute;
    left: 200px;
    top: 30%;
  }

  #title:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 3px;
    width: 50px;
    background-color: seashell;
  }

  #title:after{
    content: '';
    position: absolute;
    left: auto;
    top: auto;
    bottom: 0;
    right: 0;
    height: 3px;
    width: 50px;
    background-color: seashell;
  }

  .title_content{
    padding-left:50px;
    padding-top: 30px;
  }

  .title_content:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 48px;
    width: 3px;
    background-color: seashell;
  }

  .title_content:after{
    content: '';
    position: absolute;
    left: auto;
    top: auto;
    bottom: 0;
    right: 0;
    height: 48px;
    width: 3px;
    background-color: seashell;
  }

  .title_word{
    margin: 0;
    color: seashell;
    font-family: 华文楷体;
  }

  ::-webkit-input-placeholder { color:snow; }/*Webkit browsers 谷歌，修改placeholder的样式*/

  /*去除ie10,11浏览器中password自带的小眼睛*/
  input[type="password"]::-ms-reveal{
    display:none;
  }

  /*:-moz-placeholder {  !*Mozilla Firefox 4 to 8 火狐*!*/
    /*color: rgba(164, 164, 164, 1);*/
    /*font-size: 18px;*/
  /*}*/

  /*:-ms-input-placeholder {  !*Internet Explorer 10+ IE10以上*!*/
    /*color: rgba(164, 164, 164, 1);*/
    /*font-size: 18px;*/
  /*}*/

</style>
